<template>
	<view class="vip-container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="bg-decoration"></view>
			<view class="header-content">
				<view class="vip-icon-box">
					<image class="vip-icon" src="/static/vip/vip_diamond.png"></image>
					<view class="glow-effect"></view>
				</view>
				<view class="user-vip-info">
					<view class="user-name">{{ userInfo.nickname }}</view>
					<view class="level-info" v-if="userInfo && userInfo.isVip">
						<image class="vip-level-icon" src="/static/vip/crown.png"></image>
						<text class="level-text">尊享VIP</text>
					</view>
					<view class="level-info" v-else>
						<text class="normal-user">普通用户</text>
					</view>
					
					<view class="expire-time" v-if="userInfo && userInfo.isVip">
						<text>会员到期时间：{{ formatExpireTime(userInfo.vipExpireTime) }}</text>
						<text class="countdown">(剩余 {{ userInfo.vipDaysLeft }} 天)</text>
					</view>
					<view class="expire-time not-vip" v-else>
						<text>开通VIP享受尊贵权益</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 会员特权展示 -->
		<view class="privileges-section">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/crown_small.png"></image>
				<text>会员特权</text>
			</view>
			<view class="privileges-grid">
				<view class="privilege-item" v-for="(item, index) in privileges" :key="index">
					<image class="privilege-icon" :src="item.icon"></image>
					<text class="privilege-name">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 会员权益对比表 -->
		<view class="compare-section">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/vs.png"></image>
				<text>会员权益对比</text>
			</view>
			<view class="compare-table">
				<view class="table-header">
					<view class="feature-col">功能权益</view>
					<view class="normal-col">普通用户</view>
					<view class="vip-col">VIP会员</view>
				</view>
				<view class="table-row" v-for="(item, index) in compareTable" :key="index">
					<view class="feature-col">{{ item.feature }}</view>
					<view class="normal-col">
						<uni-icons v-if="item.normal" type="checkmark" size="16" color="#666"></uni-icons>
						<uni-icons v-else type="closeempty" size="16" color="#999"></uni-icons>
					</view>
					<view class="vip-col">
						<uni-icons v-if="item.vip" type="checkmark" size="16" color="#FFD700"></uni-icons>
						<text v-if="item.vipText" class="vip-text">{{ item.vipText }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 套餐选择区 -->
		<view class="packages-section">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/package.png"></image>
				<text>会员套餐选择</text>
				<view class="first-buy-tag" v-if="isFirstBuy">首次购买额外8折</view>
			</view>
			<view class="packages-list">
				<view 
					class="package-item" 
					v-for="(item, index) in packages" 
					:key="index"
					:class="{ 'selected': selectedPackage === index }"
					@click="selectPackage(index)"
				>
					<view class="package-top">
						<text class="package-name">{{ item.name }}</text>
						<view class="discount-tag" v-if="item.discount">{{ item.discount }}</view>
					</view>
					<view class="package-price">
						<text class="currency">¥</text>
						<text class="price-value">{{ item.price }}</text>
						<text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
					</view>
					<text class="price-per-month">¥{{ item.pricePerMonth }}/月</text>
				</view>
			</view>
		</view>
		
		<!-- 特色功能专区 -->
		<view class="special-features">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/star.png"></image>
				<text>VIP专属特权</text>
			</view>
			<view class="features-list">
				<view class="feature-item" v-for="(item, index) in specialFeatures" :key="index">
					<image class="feature-img" :src="item.image" mode="aspectFill"></image>
					<view class="feature-info">
						<view class="feature-title">{{ item.title }}</view>
						<view class="feature-desc">{{ item.description }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 用户评价区 -->
		<view class="testimonials-section">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/feedback.png"></image>
				<text>会员评价</text>
			</view>
			<swiper class="testimonials-swiper" circular autoplay interval="5000" duration="500">
				<swiper-item v-for="(item, index) in testimonials" :key="index">
					<view class="testimonial-item">
						<image class="user-avatar" :src="item.avatar"></image>
						<view class="testimonial-content">
							<view class="user-nickname">{{ item.nickname }}</view>
							<view class="testimonial-stars">
								<uni-icons v-for="i in 5" :key="i" type="star-filled" size="12" :color="i <= item.stars ? '#FFD700' : '#e0e0e0'"></uni-icons>
							</view>
							<view class="testimonial-text">{{ item.text }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 常见问题 -->
		<view class="faq-section">
			<view class="section-title">
				<image class="title-icon" src="/static/vip/question.png"></image>
				<text>常见问题</text>
			</view>
			<view class="faq-list">
				<view 
					class="faq-item" 
					v-for="(item, index) in faqs" 
					:key="index" 
					@click="toggleFaq(index)"
				>
					<view class="faq-question">
						<text>{{ item.question }}</text>
						<uni-icons :type="expandedFaq === index ? 'top' : 'bottom'" size="14" color="#999"></uni-icons>
					</view>
					<view class="faq-answer" v-if="expandedFaq === index">
						{{ item.answer }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付区域 -->
		<view class="payment-section">
			<view class="payment-methods">
				<text class="payment-title">支付方式：</text>
				<view class="payment-icons">
					<image v-for="(item, index) in paymentMethods" :key="index" :src="item.icon" class="payment-icon"></image>
				</view>
			</view>
			<view class="guarantee">
				<uni-icons type="safety-filled" size="16" color="#666"></uni-icons>
				<text>7天内可无理由退款</text>
			</view>
		</view>
		
		<!-- 底部购买按钮 -->
		<view class="bottom-action">
			<view class="selected-info" v-if="selectedPackage !== null">
				<text class="selected-package">已选：{{ packages[selectedPackage].name }}</text>
				<text class="selected-price">¥{{ packages[selectedPackage].price }}</text>
			</view>
			<button class="buy-button" @click="purchaseVip">立即开通VIP</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: 'AI主播助手',
					isVip: false,  // 是否是VIP会员
					vipExpireTime: '2024-07-15 23:59:59', // VIP到期时间
					vipDaysLeft: 30, // VIP剩余天数
				},
				isFirstBuy: true,  // 是否首次购买
				selectedPackage: 1, // 默认选择项
				expandedFaq: null, // 当前展开的FAQ项
				
				// 会员特权
				privileges: [
					{ name: '无广告体验', icon: '/static/vip/privilege_ad.png' },
					{ name: '高清画质', icon: '/static/vip/privilege_hd.png' },
					{ name: '专属标识', icon: '/static/vip/privilege_badge.png' },
					{ name: '优先直播', icon: '/static/vip/privilege_priority.png' },
					{ name: '专属礼物', icon: '/static/vip/privilege_gift.png' },
					{ name: '专属客服', icon: '/static/vip/privilege_service.png' },
					{ name: '尊享排位', icon: '/static/vip/privilege_ranking.png' },
					{ name: '超清下载', icon: '/static/vip/privilege_download.png' }
				],
				
				// 会员权益对比
				compareTable: [
					{ feature: '直播清晰度', normal: true, vip: true, vipText: '4K超清' },
					{ feature: '弹幕发送频率', normal: true, vip: true, vipText: '无限制' },
					{ feature: '视频下载', normal: false, vip: true },
					{ feature: '专属头像框', normal: false, vip: true },
					{ feature: '昵称特效', normal: false, vip: true },
					{ feature: '直播间置顶', normal: false, vip: true },
					{ feature: '专属客服', normal: false, vip: true },
					{ feature: '广告移除', normal: false, vip: true }
				],
				
				// 套餐选择
				packages: [
					{
						name: '月卡',
						price: '30',
						originalPrice: '38',
						pricePerMonth: '30',
						discount: '8折'
					},
					{
						name: '季卡',
						price: '68',
						originalPrice: '114',
						pricePerMonth: '22.6',
						discount: '6折'
					},
					{
						name: '年卡',
						price: '198',
						originalPrice: '456',
						pricePerMonth: '16.5',
						discount: '4.3折'
					}
				],
				
				// 特色功能专区
				specialFeatures: [
					{
						title: 'VIP专属直播间',
						description: '专享内容更丰富，限量VIP席位，近距离互动主播',
						image: '/static/vip/feature_live.jpg'
					},
					{
						title: '尊贵身份标识',
						description: '独特头像框和名字特效，让你在人群中脱颖而出',
						image: '/static/vip/feature_identity.jpg'
					},
					{
						title: '专属客服通道',
						description: '优先响应，解决问题更迅速，服务更贴心',
						image: '/static/vip/feature_service.jpg'
					}
				],
				
				// 用户评价
				testimonials: [
					{
						nickname: '直播达人007',
						avatar: '/static/vip/avatar1.jpg',
						stars: 5,
						text: '开通VIP后画质明显提升，专属客服非常贴心，每次问题都能快速解决！'
					},
					{
						nickname: '科技小王子',
						avatar: '/static/vip/avatar2.jpg',
						stars: 5,
						text: '年卡性价比超高，没有广告的体验太爽了，强烈推荐给喜欢看直播的朋友们。'
					},
					{
						nickname: '夜猫子学霸',
						avatar: '/static/vip/avatar3.jpg',
						stars: 4,
						text: '专属标识很酷，在直播间里更容易被主播注意到，互动机会多了很多。'
					}
				],
				
				// 常见问题
				faqs: [
					{
						question: 'VIP会员可以退款吗？',
						answer: '可以。购买VIP会员后7天内，若未使用核心权益，可申请全额退款；若已使用部分权益，将扣除已使用天数的费用后退还剩余金额。'
					},
					{
						question: 'VIP会员到期后会自动续费吗？',
						answer: '不会自动续费。VIP会员到期前，我们会通过站内信和App通知提醒您，您可以选择是否手动续费。'
					},
					{
						question: '可以更换VIP套餐吗？',
						answer: '可以。您可以随时升级到更高级别的VIP套餐，我们会按照剩余天数比例折算并补差价。但不支持降级套餐操作。'
					},
					{
						question: 'VIP特权可以赠送给好友吗？',
						answer: '目前不支持VIP特权转赠，但您可以在购买页面选择"赠送好友"，为指定用户购买VIP会员。'
					}
				],
				
				// 支付方式
				paymentMethods: [
					{ name: '微信支付', icon: '/static/vip/pay_wechat.png' },
					{ name: '支付宝', icon: '/static/vip/pay_alipay.png' },
					{ name: '银联', icon: '/static/vip/pay_unionpay.png' }
				]
			}
		},
		onLoad(options) {
			// 从页面参数或API获取用户信息
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				// 模拟获取用户信息
				setTimeout(() => {
					// 示例数据，实际应从API获取
					this.userInfo = {
						nickname: 'AI主播助手',
						isVip: true, // 假设当前是VIP
						vipExpireTime: '2024-07-15 23:59:59',
						vipDaysLeft: 30
					};
				}, 500);
			},
			formatExpireTime(timeString) {
				if (!timeString) return '';
				const date = new Date(timeString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			selectPackage(index) {
				this.selectedPackage = index;
			},
			toggleFaq(index) {
				if (this.expandedFaq === index) {
					this.expandedFaq = null;
				} else {
					this.expandedFaq = index;
				}
			},
			purchaseVip() {
				if (this.selectedPackage === null) {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none'
					});
					return;
				}
				
				const selectedPkg = this.packages[this.selectedPackage];
				uni.showModal({
					title: '确认购买',
					content: `您选择了${selectedPkg.name}，将支付¥${selectedPkg.price}，确认购买吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟支付过程
							uni.showLoading({
								title: '支付处理中...'
							});
							
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: 'VIP开通成功！',
									icon: 'success',
									duration: 2000,
									success: () => {
										// 更新用户状态为VIP
										this.userInfo.isVip = true;
										
										// 2秒后返回我的页面
										setTimeout(() => {
											uni.navigateBack();
										}, 2000);
									}
								});
							}, 1500);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.vip-container {
		background-color: #f9f9f9;
		min-height: 100vh;
		padding-bottom: 120rpx; // 为底部固定按钮留出空间
	}
	
	/* 头部区域 */
	.header {
		position: relative;
		height: 340rpx;
		overflow: hidden;
        
        .bg-decoration {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #8759f2, #4830c7);
			z-index: 1;
			
			&::before {
				content: '';
				position: absolute;
				bottom: -80rpx;
				right: -80rpx;
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.1);
			}
			
			&::after {
				content: '';
				position: absolute;
				top: -40rpx;
				left: 60rpx;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.05);
			}
		}
		
		.header-content {
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			padding: 60rpx 40rpx;
			
			.vip-icon-box {
				position: relative;
				margin-right: 30rpx;
				
				.vip-icon {
					width: 120rpx;
					height: 120rpx;
					z-index: 3;
				}
				
				.glow-effect {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 140rpx;
					height: 140rpx;
					background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(255,215,0,0) 70%);
					border-radius: 50%;
					z-index: 2;
					animation: glow 2s infinite alternate;
				}
			}
			
			.user-vip-info {
				flex: 1;
				color: #fff;
				
				.user-name {
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
					letter-spacing: 1px;
				}
				
				.level-info {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					
					.vip-level-icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
					
					.level-text {
						font-size: 30rpx;
						color: #FFD700;
						font-weight: bold;
					}
					
					.normal-user {
						font-size: 30rpx;
						color: rgba(255, 255, 255, 0.8);
					}
				}
				
				.expire-time {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.9);
					
					.countdown {
						margin-left: 10rpx;
						color: #FFEB3B;
						font-weight: bold;
					}
					
					&.not-vip {
						padding: 8rpx 0;
						font-size: 26rpx;
						color: #FFEB3B;
					}
				}
			}
		}
	}
	
	/* 公共段落标题样式 */
	.section-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		position: relative;
		padding-left: 10rpx;
		
		.title-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
		
		.first-buy-tag {
			position: absolute;
			right: 0;
			background-color: #ff3366;
			color: white;
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
			font-weight: normal;
		}
	}
	
	/* 会员特权网格 */
	.privileges-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.privileges-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30rpx;
			
			.privilege-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.privilege-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 12rpx;
				}
				
				.privilege-name {
					font-size: 24rpx;
					color: #333;
					text-align: center;
				}
			}
		}
	}
	
	/* 会员权益对比表 */
	.compare-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.compare-table {
			border-radius: 12rpx;
			overflow: hidden;
			border: 1px solid #eaeaea;
			
			.table-header, .table-row {
				display: flex;
				align-items: center;
				
				.feature-col {
					flex: 2;
					padding: 20rpx;
					text-align: left;
				}
				
				.normal-col, .vip-col {
					flex: 1;
					padding: 20rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			
			.table-header {
				background-color: #f6f6f6;
				font-weight: bold;
				font-size: 28rpx;
				
				.vip-col {
					color: #8759f2;
				}
			}
			
			.table-row {
				border-top: 1px solid #eaeaea;
				font-size: 26rpx;
				
				&:nth-child(odd) {
					background-color: #fafafa;
				}
				
				.vip-col {
					color: #8759f2;
					
					.vip-text {
						margin-left: 8rpx;
						font-weight: bold;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
	/* 套餐选择区 */
	.packages-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.packages-list {
			display: flex;
			justify-content: space-between;
			
			.package-item {
				flex: 1;
				margin: 0 10rpx;
				padding: 20rpx;
				border-radius: 12rpx;
				border: 2rpx solid #e0e0e0;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				transition: all 0.3s;
				
				&.selected {
					border-color: #8759f2;
					background-color: rgba(135, 89, 242, 0.05);
					transform: translateY(-6rpx);
					box-shadow: 0 6rpx 20rpx rgba(135, 89, 242, 0.15);
					
					&::after {
						content: '';
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: #8759f2;
						border-radius: 50%;
						background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
						background-size: 70%;
						background-position: center;
						background-repeat: no-repeat;
					}
				}
				
				.package-top {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					position: relative;
					margin-bottom: 16rpx;
					
					.package-name {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					
					.discount-tag {
						position: absolute;
						right: 0;
						top: 0;
						background-color: #ff3366;
						color: white;
						font-size: 20rpx;
						padding: 2rpx 10rpx;
						border-radius: 10rpx;
					}
				}
				
				.package-price {
					display: flex;
					align-items: baseline;
					margin-bottom: 6rpx;
					
					.currency {
						font-size: 26rpx;
						color: #333;
						font-weight: bold;
						margin-right: 2rpx;
					}
					
					.price-value {
						font-size: 40rpx;
						color: #8759f2;
						font-weight: bold;
					}
					
					.original-price {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}
				
				.price-per-month {
					font-size: 22rpx;
					color: #666;
					margin-top: 6rpx;
				}
			}
		}
	}
	
	/* 特色功能专区 */
	.special-features {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.features-list {
			.feature-item {
				display: flex;
				margin-bottom: 30rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.feature-img {
					width: 160rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					background-color: #f5f5f5; // 占位背景色
				}
				
				.feature-info {
					flex: 1;
					
					.feature-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.feature-desc {
						font-size: 24rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
		}
	}
	
	/* 用户评价区 */
	.testimonials-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.testimonials-swiper {
			height: 200rpx;
			
			.testimonial-item {
				display: flex;
				align-items: center;
				padding: 10rpx;
				
				.user-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: #f0f0f0; // 占位背景色
				}
				
				.testimonial-content {
					flex: 1;
					
					.user-nickname {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.testimonial-stars {
						display: flex;
						margin-bottom: 8rpx;
					}
					
					.testimonial-text {
						font-size: 24rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
		}
	}
	
	/* 常见问题 */
	.faq-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.faq-list {
			.faq-item {
				margin-bottom: 20rpx;
				
				.faq-question {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					border-bottom: 1rpx solid #eaeaea;
				}
				
				.faq-answer {
					padding: 20rpx 0;
					font-size: 26rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
	}
	
	/* 支付区域 */
	.payment-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.payment-methods {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.payment-title {
				font-size: 28rpx;
				color: #333;
				margin-right: 20rpx;
			}
			
			.payment-icons {
				display: flex;
				
				.payment-icon {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		.guarantee {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			
			uni-icons {
				margin-right: 10rpx;
			}
		}
	}
	
	/* 底部购买按钮 */
	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		display: flex;
		align-items: center;
		z-index: 100;
		box-sizing: border-box;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); 
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		
		.selected-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.selected-package {
				font-size: 26rpx;
				color: #666;
			}
			
			.selected-price {
				font-size: 36rpx;
				color: #8759f2;
				font-weight: bold;
			}
		}
		
		.buy-button {
			background: linear-gradient(135deg, #8759f2, #4830c7);
			color: white;
			border: none;
			padding: 0 60rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	/* 动画 */
	@keyframes glow {
		from {
			opacity: 0.7;
			transform: translate(-50%, -50%) scale(1);
		}
		to {
			opacity: 0.9;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}
	
	/* 媒体查询：兼容小屏设备 */
	@media screen and (max-width: 320px) {
		.privileges-grid {
			grid-template-columns: repeat(3, 1fr) !important;
		}
		
		.packages-list {
			flex-direction: column;
			
			.package-item {
				margin: 0 0 20rpx 0;
			}
		}
	}
</style> 